<template>
  <div class="ProductList">
    <currencyTopAuto>
      <currencySearch></currencySearch>
    </currencyTopAuto>
    <currencySearchOption @get:content="getContent"></currencySearchOption>
    <div class="ProductList">
      <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
        <ProductListData :data="data"></ProductListData>
      </van-list>
    </div>
  </div>
</template>

<script>
import currencySearch from "@/components/currency/currencySearch.vue";
import currencyTopAuto from "@/components/currency/currencyTopAuto.vue";
import ProductListData from "@/components/list/ProductListData.vue";
import currencySearchOption from "@/components/currency/currencySearchOption.vue";
import { getSearchBrand, getSearchRegionTopicId } from "@/api";
import { ProductListBable } from "@/assets/js/babel.js";
import { ProductListString } from '@/cheerio'

export default {
  name: "ProductList",
  components: {
    currencyTopAuto,
    currencySearch,
    ProductListData,
    currencySearchOption
  },
  data() {
    return {
      data: [],
      page: 1,
      loading: false,
      finished: false
    };
  },
  methods: {
    getContent(orderBy = this.$route.query.orderBy) {
      if ("region" in this.$route.query) {
        getSearchRegionTopicId({
          ...this.$route.query,
          currentPage: this.page
        }).then(res => {
          let object = ProductListBable(res);
          if (!object) {
            this.finished = true;
          } else {
            this.data.push(...object);
            this.loading = false;
            this.page++;
          }
        });
        // 复杂数据需处理
      } else {
        // 普通接口
        getSearchBrand({
          cate_brand_id: this.$route.query.id,
          orderBy,
          currentPage: this.page
        }).then(res => {
          let object = ProductListString(res);
          // let object = ProductListBable(res);
          if (!object) {
            this.finished = true;
          } else {
            this.data.push(...object);
            this.loading = false;
            this.page++;
          }
        });
      }
    },
    onLoad() {
      this.getContent();
    }
  },
  watch: {
    $route() {
      this.data = [];
      this.page = 1;
    }
  }
};
</script>
<style scoped>
.ProductList {
  background-color: #f5f5f5;
}
</style>